/** @jsx React.DOM */
var React = require('react');

var Dialog = React.createClass({displayName: 'Dialog',
	render: function() {
		if (this.state.hide) {
			return null;
		}
		var containerStyle = {
			width: this.props.width
		};

		var btnClassName,spanStyle;

		if (this.state.times > 0) {
			btnClassName = "pure-button pure-button-primary pure-button-disabled";
			spanStyle = {
				'visibility': 'normal'
			};
		} else {
			btnClassName = "pure-button pure-button-primary";
			spanStyle = {
				'display': 'none'
			};
		}

		return (
			React.DOM.div({className: "dialog", style: containerStyle}, 
				React.DOM.div({className: "dialog-header", onMouseDown: this.handleHeaderDragStart}, 
					React.DOM.button({onClick: this.closeDialog}, "×"), 
					React.DOM.h4(null, this.props.title)
				), 
				React.DOM.div({className: "dialog-body"}, 
					this.props.children
				), 
				React.DOM.div({className: "dialog-footer"}, 
					React.DOM.form(null, 
						React.DOM.button({className: btnClassName, onClick: this.handleFirstClick}, 
							React.DOM.span({style: spanStyle}, "(", this.state.times, ")"), 
								this.props.firstBtnName
						), 
						React.DOM.button({className: "pure-button", onClick: this.handleSecondClick}, 
							this.props.secondBtnName
						)
					)
				)
			)
		)
	},
	closeDialog: function() {
		this.setState({hide: true});
	},
	handleFirstClick: function() {
		if (this.state.times !== 0) {
			return;
		}
		this.props.firstBtnAction.apply(this, arguments);
	},
	handleSecondClick: function() {
		this.props.secondBtnAction.apply(this, arguments);
	},
	getDefaultProps: function() {
		return {
			firstBtnName: 'OK',
			secondBtnName: 'Cancel',
			firstBtnAction: function() {
				console.log('first button clicked');
			},
			secondBtnAction: function() {
				console.log('second button clicked');
			}
		};
	},
	getInitialState: function() {
		return {times: 9};
	},
	addTimes: function() {
		if (this.state.times > 0) {
			this.setState({times: this.state.times - 1});
			setTimeout(this.addTimes, 1000);
		}
	},
	componentDidMount: function() {
		setTimeout(this.addTimes, 1000);
	}
});

module.exports = Dialog;
